<template>
  <div class="report bg-white px-5 pt-3 box-border">
    <div class="rep-top flex justify-between items-center">
      <span class="title">体测报告</span>
      <div class="flex items-center">
        <div class="flex mr-5 items-center">
          <span :class="[isDay ? 'rep_Active' : '', 'rep_item text-xs']" @click="handleChangeTime(1)" >今日</span>
        </div>
        <div>
          <el-date-picker v-model="timeDay" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width: 150px" @change="handleChangeTime(2)" />
        </div>
      </div>
    </div>
    <div class="cont">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="getReportData" :value="activeName" >
        <el-tab-pane label="睡眠" name="0" >
          <Sleep v-if="activeName == '0'" :reportData="reportObj" :big-font-flag="false" />
        </el-tab-pane>
        <el-tab-pane label="血氧" name="1">
          <SaO2 v-if="activeName == '1'" :reportData="reportObj" :big-font-flag="false" />
        </el-tab-pane>
        <el-tab-pane label="心率" name="2" >
          <Hr v-if="activeName == '2'" :reportData="reportObj" :big-font-flag="false" />
        </el-tab-pane>
        <el-tab-pane label="呼吸" name="3" >
          <Resp v-if="activeName == '3'" :reportData="reportObj" :big-font-flag="false" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import {storeToRefs} from 'pinia'
import {reactive, ref, watch} from 'vue'
import Sleep from './sleep.vue'
import SaO2 from './saO2.vue'
import Hr from './hr.vue'
import Resp from './resp.vue'

import {usePatientStore} from '@/store/modules/patient'
import {reportData} from '@/api/patient'
import {getDay} from '@/utils'

const usePatient = usePatientStore()
const {currentPatient} = storeToRefs(usePatient)
const isDay = ref(true)
const timeDay = ref('') //单天
const activeName = ref('0')
const reportObj: any = ref({}) //报告数据

type reporType = {
  visitNo: StrUn //就诊号
  startTime: StrUn //开始时间
}
const reporQueryParams = reactive<reporType>({
  visitNo: '',
  startTime: ''
})
//监听选择的就诊人变化变化
watch(currentPatient, (newValue) => {
  activeName.value = '0' //改变患者 把报告置为睡眠
  reporQueryParams.visitNo = newValue.visitNoStr //就诊号
  handleChangeTime(1)
})

//选择时间
type ChangeTimeType = 1 | 2
const handleChangeTime = (type: ChangeTimeType) => {
  switch (type) {
    case 1:
      //选择今日
      isDay.value = true
      reporQueryParams.startTime = getDay() //今日
      ;(timeDay.value = '')
      break
    case 2:
      //选择单日
      if (timeDay.value) {
        isDay.value = false
        reporQueryParams.startTime = timeDay.value
      } else {
        isDay.value = true
        reporQueryParams.startTime = getDay() //今日
      }
      break
  }
  //存储请求数据  打印用
  usePatient.setReporQueryParams(reporQueryParams)
  //调报告接口
  getReportData()
}

//获取报告数据
const getReportData = () => {
  if (!reporQueryParams.visitNo) {
    return;
  }
  reportData(activeName.value, reporQueryParams).then((res: any) => {
    reportObj.value = res.data || {};
  })
}
//调报告接口
getReportData()
</script>

<style scoped lang="less">
.report {
  width: 100%;
  height: 460px;

  .rep_item {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }

  .rep_Active {
    font-weight: bold;
    color: #00a991;
  }

  .title {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
